<template>
  <div class="Detail">
    <NavTenYear></NavTenYear>
    <div class="img">
        <el-image :src="detail.image_url" fit="cover"></el-image>
    </div>
    <el-container class="main">
        <el-header height="400px">
            <h2>{{detail.title}}</h2>
            <time>{{detail.create_time | dayFix1}}</time>
            <div class="author">
                <div class="img">
                    <el-image :src="detail.header_url" fit="cover"></el-image>
                </div>
                <p class="name">{{detail.user_nick_name}}</p>
                <p class="introduce">{{detail.signature}}</p>
            </div>
            <div class="message">
                <i class="iconfont icon-yanjing">{{detail.clicks}}</i>
                <i class="iconfont icon-dianzan">{{detail.likes}}</i>
                <i class="iconfont icon-pinglun">{{commentsList.length}}</i>
                <i class="iconfont icon-shoucang">{{detail.starts}}</i>
            </div>
        </el-header>
        <el-main>
            <div class="nextTitle" v-if="true">
                <el-card>
                    {{detail.digest}}
                </el-card>
            </div>
            <div class="passage" v-html="detail.content">
            </div>
            <div class="line"></div>
            <div class="detail">
                <div class="tags">
                    <el-tag class="big">{{detail.one_source}}</el-tag>
                    <el-tag v-for="(val,index) in two_source" :key="index">{{val}}</el-tag>
                </div>
                <div class="two">
                    <div class="left" @click="zan" ref="zan">
                        <i class="iconfont icon-dianzan"></i>
                    </div>
                    <div class="right" @click="start" ref="start">
                        <i class="iconfont icon-shoucang"></i>
                    </div>
                </div>
            </div>
            <div class="comments">
                <div class="nums"><span>{{commentsList.length}}</span>条评论</div>
                <div class="line"></div>
                <div class="content">
                    <div class="img">
                        <el-image :src="this.userMessage? this.userMessage.header_url:getHeaderUrl" fit="cover"></el-image>
                    </div>
                    <div class="input">
                        <textarea @input="number" v-model="textarea" id="text" placeholder="请输入文字" rows="8" cols="60" style="resize: none;"></textarea>
                        <div class="num">{{numbers}}/250</div>
                    </div>
                    <div class="put">
                        <el-button type="success" @click="commentDirect">发布评论</el-button>
                    </div>
                </div>
                <div class="comments-list">
                    <el-empty v-if="false" description="暂无内容" :image-size="300"></el-empty>
                    <!-- <CommentsList></CommentsList> -->
                    <CommentsList v-for="(val) in commentsList" :key="val.comment_id" :config="val" :article_id="article_id"></CommentsList>
                </div>
            </div>
        </el-main>
    </el-container>
  </div>
</template>

<script>
import CommentsList from './CommentsList'
import { mapState } from 'vuex';
export default {
    name: "Detail",
    props:['article_id','floor'],
    data() {
        return {
            textarea:'',
            numbers:0,
            detail:{
                "create_time": "",
                "title": '',
                "author_id": '',
                "image_url": "",
                "one_source": "",
                "two_source": "",
                "digest": "",
                "content": "",
                "clicks": 0,
                "starts": 0,
                "likes": 0,
                "user_nick_name": "",
                "signature": "",
                "header_url": ""
            },
            flag:true,
            commentsList:[  //总评论
                // {
                //     create_time:'', //时间
                //     user_id:'', //评论者id
                //     user_nick_name:'',  //评论者昵称
                //     header_url:'',  //评论者头像
                //     signature:'',   //评论者签名
                //     floor:'',       //楼层
                //     content:'',     //内容
                //     comments_like:'',   //点赞数
                //     children:[
                //         {
                //             content:'',
                //             user_id:'',
                //             user_nick_name:'',
                //             header_url:'',
                //             signature:'',
                //             reply_user_nick_name:'',//被回复的人的的id
                //             comments_like:'',
                //             create_time:'',
                //         }
                //     ]
                // },//....
            ],
            commentsListLength:0,
        }
    },
    created(){
        sessionStorage.setItem('header_url','/user_header_image/user_header_0.jpg')
        //文章内容
        this.$store.dispatch('base/reqDetail', this.article_id).then((result)=>{
            if(result.data.status == '200'){
                this.detail = result.data.data[0];
            }
        });
        //拿到这篇文章的所有评论
        this.$store.dispatch('base/reqComment', this.article_id).then((result)=>{
            if(result.data.status == '200'){
                this.commentsList = result.data.data
                this.commentsListLength = this.commentsList.length
            }
        });
    },
    mounted(){
        //判断当前用户是否点赞
        this.$store.dispatch('detail/reqIfLikeAndStart', this.article_id).then((result)=>{
            if(result.data.status == '200'){
                if(result.data.bool.like) this.$refs.zan.classList.add('active')
                if(result.data.bool.start) this.$refs.start.classList.add('active')
            }else if(result.data.status == '500'){
                this.$message({
                    message:'服务器错误',
                    type:'error'
                })
            }
        });
        if(this.userMessage) sessionStorage.setItem('header_url',this.userMessage.header_url)   //评论头像
    },
    methods: {
        number() {
            this.numbers = this.textarea.length
            if(this.numbers>250){
                this.numbers=250
                this.textarea = this.textarea.substr(0,250)
            }
        },
        zan(){
            if(this.flag){
                this.flag = false
                if(this.$refs.zan.classList.contains('active')){
                    this.$store.dispatch('detail/reqZan', {item:-1,article_id:this.article_id}).then((result)=>{
                        this.flag = true;
                        if(result.data.status == '200'){
                            this.$message({
                                message:'取消点赞成功',
                                type:'success'
                            })
                        this.detail.likes--;
                        this.$refs.zan.classList.remove('active')
                        }else if(result.data.status == '205'){
                            this.noLogin();
                        }else{
                            this.$message({
                                message:'服务器错误',
                                type:'error'
                            })
                        }
                    });
                }else{
                    this.$store.dispatch('detail/reqZan', {item:1,article_id:this.article_id}).then((result)=>{
                        this.flag = true;
                        if(result.data.status == '200'){
                            this.$message({
                                message:'点赞成功',
                                type:'success'
                            })
                            this.$refs.zan.classList.add('active')
                            this.detail.likes++;
                        }else if(result.data.status == '205'){
                            this.noLogin();
                        }else{
                            this.$message({
                                message:'服务器错误',
                                type:'error'
                            })
                        }
                    });
                }
            }else{
                this.$message({
                    message:'你点太快了',
                    type:'error'
                })
            }
        },
        start(){
            if(this.flag){
                this.flag = false
                if(this.$refs.start.classList.contains('active')){
                    this.$store.dispatch('detail/reqStart', {item:-1,article_id:this.article_id}).then((result)=>{
                        this.flag = true;
                        if(result.data.status == '200'){
                            this.$message({
                                message:'取消收藏成功',
                                type:'success'
                            })
                            this.$refs.start.classList.remove('active')
                            this.detail.starts--;
                        }else if(result.data.status == '205'){
                            this.noLogin();
                        }else{
                            this.$message({
                                message:'服务器错误',
                                type:'error'
                            })
                        }
                    });
                }else{
                    this.$store.dispatch('detail/reqStart', {item:1,article_id:this.article_id}).then((result)=>{
                        this.flag = true;
                        if(result.data.status == '200'){
                            this.$message({
                                message:'收藏成功',
                                type:'success'
                            })
                            this.$refs.start.classList.add('active')
                            this.detail.starts++;
                        }else if(result.data.status == '205'){
                            this.noLogin();
                        }else{
                            this.$message({
                                message:'服务器错误',
                                type:'error'
                            })
                        }
                    });
                }
            }else{
                this.$message({
                    message:'你点太快了',
                    type:'error'
                })
            }
        },
        //直接评论
        commentDirect(){
           if(this.textarea.length == 0){
            this.$message({
                message:'你还没有输入内容',
                type:'error'
            })
           }else{
            let obj = {
                article_id:this.article_id,
                content:this.textarea,
            }
            this.$store.dispatch('detail/reqCommentDirect', obj).then((result)=>{
                if(result.data.status == '200'){
                    this.commentsList.unshift(result.data.data[0]);
                    this.commentsListLength++;
                    this.textarea = ''
                }else if(result.data.status == '205'){
                    this.noLogin();
                }
            });
           }
        }
    },
    computed: {
        two_source() {
            return this.detail.two_source.split(',');
        },
        noLogin(){
            return ()=>{
                this.$confirm('你还未登录，是否前往登录页面', '提示', {
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                    type: 'warning'
                }).then(() => {
                    this.$router.replace({
                        name:'RegisterAndLogin'
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });          
                });
            }
        },
        ...mapState('registerAndLogin', ['userMessage']),
        getHeaderUrl(){
            return sessionStorage.getItem('header_url')
        }
    },
    watch: {
        commentsList(newValue, oldValue) {
            if(this.floor){ //最新评论跳来的
                if(newValue.length != 0){
                    this.$nextTick(()=>{
                        let arr = [...document.querySelectorAll('.father')]
                        for(let i=0;i<arr.length;i++){
                            if(arr[i].getAttribute('data-floor')){
                                window.scrollTo({
                                    top: arr[i].offsetTop,
                                    behavior: "smooth"
                                })
                                this.floor = null
                                break;
                            }
                        }
                    })
                    
                }
                
            }
        },
    },
    components: { CommentsList, }
}
</script>

<style lang="less">
    .Detail{
        display: flex;
        align-items: center;
        flex-direction:column ;
        &>.img{
            width: 100vw;
            height:18rem;
            box-shadow: 3px 3px 5px rgba(0,0,0,.3);
            .el-image{
                height: 100%;
                width: 100%;
                img{
                    height: 100%;
                    width: 100%;
                }
            }
        }
        .main{
            width: 70vw;
            height: auto;
            border: 2px solid black;
            border-radius:2em ;
            margin-top: 20px;

            .el-header{
                display: flex;
                align-items: center;
                flex-direction:column ;
                h2{
                    margin-top: 65px;
                    font-size: 35px;
                    font-family: 'FZZYJT';
                    font-weight: bolder;
                }
                time{
                    font-family: 'FZZYJT';
                    font-weight: bolder;
                    color: rgb(68, 64, 64);
                    margin-top: 30px;
                }
                .author{
                    display: flex;
                    align-items: center;
                    flex-direction:column ;
                    .img{
                        width: 70px;
                        height: 70px;
                        border: 4px solid black;
                        border-radius: 50%;
                        overflow: hidden;
                        margin-top: 20px;
                        .el-image{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    p{
                        font-family: 'FZZYJT';
                        font-weight: bolder;
                        margin-top: 10px;
                    }
                    .introduce{
                        font-size: 14px;
                        color: rgb(141, 138, 138);
                    }

                }
                .message{
                    margin-top:10px ;
                    i{
                        font-size: 18px;
                        margin: 0 15px 0 15px;
                        user-select: none;
                        font-weight: bolder;
                    }
                }
            }
            .el-main{
                .nextTitle{
                    .el-card{
                        height:80px;
                        display: flex;
                        align-items: center;
                        font-size:30px ;
                        text-transform:capitalize
                    }
                }
                .passage{
                    width: 80%;
                    min-height: 400px;
                    margin-top: 50px;
                    font-family: 'FZZYJT';
                    margin: 0 auto;
                    margin-top: 20px;
                    font-size: 18px;
                    line-height: 20px;
                }
                .line{
                    height: 1px;
                    width: 90%;
                    margin: 0 auto;
                    background-color: rgb(128, 125, 125);
                    margin-top: 20px;
                }
                .detail{
                    margin-top:20px ;
                    width: 90%;
                    margin: 0 auto;
                    height: 200px;
                    position: relative;
                    .tags{
                        margin-top:10px ;
                        .el-tag{
                            background-color: rgb(207, 195, 195);
                            color: black;
                            font-size: 18px;
                            user-select: none;
                        }
                        .big {
                            font-size:20px ;
                            color: rgb(255, 255, 255);
                            background-color:black ;
                            border: thick double white ;
                            height: 40px;
                            margin-right:5px ;
                        }
                    }
                    .two{
                        width: 30vw;
                        height: 100px;
                        position: absolute;
                        top: 95px;
                        left: 0;
                        right: 0;
                        margin: 0 auto;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .left,.right{
                            width: 50px;
                            height: 50px;
                            border: 2px solid black;
                            border-radius: 50%;
                            cursor: pointer;
                            &:hover{
                                background-color:rgb(39, 240, 83) ;
                            }
                        }
                        .active{
                            background-color:rgb(39, 240, 83) ;
                        }
                        .left{
                            margin-left:10px ;
                        }
                        .right{
                            margin-right:10px ;
                        }
                        i{
                            font-size:40px;
                            position: relative;
                            left: 5px;
                        }
                    }
                }
                .comments{
                    .nums{
                        font-size: 40px;
                        user-select: none;
                    }
                    .line{
                        height: 1px;
                        width: 100%;
                        background-color: black;
                    }
                }
                .content{
                    width: 90%;
                    height: 250px;
                    margin: 0 auto;
                    margin-top:20px ;
                    display: flex;
                    flex-direction: row;
                    position: relative;
                    &>.img{
                        width: 70px;
                        height: 70px;
                        border: 4px solid black;
                        border-radius: 50%;
                        overflow: hidden;
                        .el-image{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    &>.input{
                        width:54vw;
                        margin-left:12px ;
                        font-size: 30px;
                        position: relative;
                        border-radius: 1em;
                        height: 190px;
                        overflow: hidden;
                        border: 4px black solid;
                        background-color:white ;
                        #text{
                            font-size: 22px;
                            font-family: inherit;
                            outline: none;
                            line-height: 33px;
                            text-indent:  5px each-line;
                            transform: translate(15px,5px);
                            border: none;
                        }
                        &>.num{
                            position: absolute;
                            right: 10px;
                            bottom: 7px;
                        }
                    }
                    &>.put{
                        .el-button{
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            font-size: 18px;
                        }

                    }
                }
                .comments-list{
                    
                    .el-empty{
                        height: 500px;
                        .el-empty__description{
                            &>p{
                                color: black;
                                font-size: 30px;
                            }
                        }
                    }
 
                }
            }
        }
    }
</style>
